<!--编辑窗口-->
<template>
  <!-- 工作台相关 -->
  <div class="go-chart bz-workbench-related">
    <n-layout>
      <layout-header-pro>
        <template #left>
          <header-left-btn></header-left-btn>
        </template>
        <template #center>
          <header-title></header-title>
        </template>
        <template #ri-left>
          <header-right-btn></header-right-btn>
        </template>
      </layout-header-pro>
      <n-layout-content content-style="overflow:hidden; display: flex">
        <div style="overflow:hidden; display: flex">
          <!--    组件元素      -->
          <content-charts></content-charts>
          <!--    已添加的组件元素      -->
          <content-layers></content-layers>
        </div>
        <content-configurations></content-configurations>
      </n-layout-content>
    </n-layout>
  </div>
  <!-- 右键 -->
  <n-dropdown
      placement="bottom-start"
      trigger="manual"
      size="small"
      :x="mousePosition.x"
      :y="mousePosition.y"
      :options="menuOptions"
      :show="chartEditStore.getRightMenuShow"
      :on-clickoutside="onClickOutSide"
      @select="handleMenuSelect"
  ></n-dropdown>
  <!-- 加载蒙层 -->
  <content-load></content-load>
</template>

<script setup lang="ts">
import {componentInstall, loadAsyncComponent, MessageError} from '@/utils'
import {LayoutHeaderPro} from '@/layout/components/LayoutHeaderPro'
import {useContextMenu} from './hooks/useContextMenu.hook'
import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
import {useChartHistoryStore} from '@/store/modules/chartHistoryStore/chartHistoryStore'
import {useRoute} from 'vue-router';
import {nextTick, onMounted} from 'vue'
// @ts-ignore
import UserPageApi from "@/api/flow/UserPageApi.js";
import {fetchChartComponent} from "@/packages/index";
import {getSessionStorageInfo} from "@/views/preview/utils";
import {userPageProject} from "@/store/modules/flow/userPageProject";
import {Project} from "@/api/ProjectsApi";
import Utils from "@/vue2-flow/src/utils/Common";
import {UserComponent} from "@/api/UserComponentsApi";

const chartHistoryStoreStore = useChartHistoryStore()
const chartEditStore = useChartEditStore()

// 记录初始化
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
const PageProject = userPageProject()
const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/index.vue'))
const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/index.vue'))
const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
const route = useRoute();
const id = route.params.id;
// 右键
const {
  menuOptions,
  onClickOutSide,
  mousePosition,
  handleMenuSelect
} = useContextMenu()
onMounted(() => {
  /**
   * 编辑窗口，开始获取组件信息
   */
  nextTick(() => {
    const _ID = id.toString().replace(',', '')
    const sd = getSessionStorageInfo(_ID) as any
    Project.Get(+_ID).then(res => {
      if (res.IsSuccess) {
        PageProject.SetCurrentEditProject(res?.Data)
      } else {
        MessageError("获取项目异常，项目ID:" + _ID);
      }
    });
    const componentList = sd?.componentList
    if (Utils.IsEmpty(componentList)) {
      UserComponent.Gets(+id).then(Components => {
        // ComponentInstall(Components)
      });
    } else {
      ComponentInstall(componentList)
    }
  })
})

const ComponentInstall = (componentList: object) => {
  // for (let sdKey in componentList.componentList) {
  //   const item =componentList[sdKey].chartConfig
  //   componentInstall(item.chartKey, fetchChartComponent(item))
  // }
  for (let sdKey in componentList) {
    const item = componentList[sdKey].chartConfig
    componentInstall(item.chartKey, fetchChartComponent(item))
  }

  // if (sd && sd.componentList) {
  //   for (let sdKey in sd.componentList) {
  //     const item = sd.componentList[sdKey].chartConfig
  //     componentInstall(item.chartKey, fetchChartComponent(item))
  //   }
  // }
}
</script>

<style lang="scss" scoped>
@include go("chart") {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  @include background-image("background-image");
}
</style>
